<template>
	<div class="lk-zc">
		<div class="lk-bottom">
			<a href="#/">
				<img src="../assets/logo.png" alt="" />
			</a>
			<div class="lk-bottom-title"><span>会员注册</span>
			</div>

		</div>
		<div class="lk-lkzc">
			<img src="../assets/lbwzc.png" />
			<div class="lk-dl-zc">
				<div class="lk-dl-zc-login">
					<div class="lk-login-top">注册</div>
					<input type="text" v-model="userphone" value="" placeholder="请输入手机号" class="lk-login-inp" @change="chang" />
					<div class="lk-login-waring waning-phone"><img src="../assets/error.png" />请输入手机号</div>
					<input type="password" v-model="password" value="" placeholder="请输入密码（6-20位号码字符）" class="lk-login-inp" @change="changm" />
					<div class="lk-login-waring waning-password"><img src="../assets/error.png" alt="" />请输入密码</div>
					<div class="lk-login-yzm"><input type="text" name=""  value="" placeholder="请输入验证码" class="lk-login-code" /><span @click="huan()">看不清换一张</span></div>
					<div class="lk-login-waring"></div>
					<div class="lk-phone"><input type="text" name=""  value="" placeholder="请输入手机验证码" class="lk-login-inp" />
						<a href="###" class="lk-phone-yz">手机验证码</a>
					</div>
					<div class="lk-login-waring"><img src="../assets/error.png" alt="" />请输入短信验证码</div>
					<div class="lk-login-xy"><input type="radio" name=""  value="" /> <span>我已阅读并同意</span>
						<a href="">《礼拜五用户使用协议》</a>
					</div>
					<div class="lk-login-btn"><button @click="zc()">注册</button><button @click="tz()">登录</button></div>
				</div>
			</div>

		</div>
		<ft>北京澳环科技提供技术支持</ft>
	</div>
</template>

<script>
	import Ft from '@/components/foot'


	export default {
		name: 'zc',
		data() {
			return {
				userphone: "",
				password: ""
			}
		},
		components: {
			Ft
		},
		methods: {
			huan: function() {

			},
			chang() {
				var pan = "";
				var phone = this.userphone;
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if(!myreg.test(phone)) {
					pan = false;
				} else {
					pan = true;
				}
				if(pan) {
					$('.waning-phone').css("visibility", "hidden")
				} else {
					$('.waning-phone').css("visibility", "visible")
				}
			},
			changm(){
				var pan = "";
				var phone = this.password;
				var myreg = /^[A-Za-z0-9]{6,20}$/;
				if(!myreg.test(phone)) {
					pan = false;
				} else {
					pan = true;
				}
				if(pan) {
					$('.waning-password').css("visibility", "hidden")
				} else {
					$('.waning-password').css("visibility", "visible")
				}
			},
			zc() {
				var pan = "";
				var phone = this.userphone;
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if(!myreg.test(phone)) {
					pan = false;
				} else {
					pan = true;
				}
				if(pan) {
					var _this = this;
					$.ajax({
						type: "get",
						url: "http://localhost:8088/dlzc",
						async: true,
						data: {
							act: "zc",
							phonenum: _this.userphone,
							password: _this.password,
						},
						dataType: 'json',
						success(data) {
							
							if(data.err) {
								console.log("注册成功！")
							}else{
								alert(data.msg)
							}
						}
					});
				} else {
					alert("请正确输入手机号！")
				}
			},
			tz() {
				window.location.href = "http://localhost:8080/#/dl"
			}

		}

	}
</script>

<style>
	.lk-login-btn>button:last-child {
		background: #4B943D;
		float: right;
	}
	
	.lk-login-btn>button {
		float: left;
		display: block;
		width: 140px;
		background-color: #ea5b0c;
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
		outline: none;
		list-style-type: none;
	}
	
	.lk-login-btn {
		overflow: hidden;
	}
	
	.lk-login-xy {
		overflow: hidden;
		color: rgb(50, 50, 50);
		font-size: 12px;
		height: 40px;
		line-height: 40px;
		display: block;
		text-decoration: none;
		margin: 10px 0;
	}
	
	.lk-login-xy>a {
		color: rgb(50, 50, 50);
	}
	
	.lk-login-xy span {
		margin-left: 5px;
	}
	
	.lk-phone {
		position: relative;
	}
	
	.lk-phone-yz {
		position: absolute;
		top: 2px;
		right: 2px;
		color: #fff;
		font-size: 12px;
		background: #4B943D;
		display: block;
		height: 30px;
		line-height: 30px;
		float: left;
		padding: 0 15px;
		text-decoration: none;
	}
	
	.lk-login-yzm {
		overflow: hidden;
	}
	
	.lk-login-yzm>span {
		color: #ff6600;
		font-size: 12px;
		text-decoration: none;
	}
	
	.lk-login-code {
		float: left;
		width: 130px;
		height: 34px;
		box-sizing: border-box;
		padding: 5px 8px;
		border: 1px solid #d3d3d3;
		background-color: #f9f9f9;
	}
	
	.lk-login-waring {
		height: 30px;
		line-height: 30px;
		color: #f30;
		font-size: 12px;
		visibility: hidden;
	}
	
	.lk-login-waring>img {
		width: 12px;
		height: 12px;
		vertical-align: -4%;
		margin: 0 5px 0 0
	}
	
	.lk-login-inp {
		height: 34px;
		box-sizing: border-box;
		padding: 5px 8px;
		border: 1px solid #d3d3d3;
		width: 100%;
		background-color: #f9f9f9;
		color: rgb(50, 50, 50);
		font-size: 13px;
	}
	
	.lk-bottom {
		width: 1280px;
		margin: 25px auto 0;
		overflow: hidden;
	}
	
	.lk-bottom img {
		float: left;
		vertical-align: middle;
		/*height: 92px;*/
	}
	
	.lk-bottom-title {
		float: left;
		width: 400px;
		margin-left: 30px;
		line-height: 90px;
	}
	
	.lk-bottom-title>span {
		padding-left: 30px;
		border-left: solid 1px #ddd;
		font-size: 20px;
		color: #666;
		font-weight: 700;
	}
	
	.lk-lkzc {
		position: relative;
	}
	
	.lk-lkzc>img {
		width: 100%;
		height: 500px;
		vertical-align: middle;
	}
	
	.lk-dl-zc {
		position: absolute;
		top: 0;
		left: 50%;
		width: 320px;
		height: 480px;
		margin-left: 200px;
		padding: 20px 40px 0;
		background-color: #fff;
	}
	
	.lk-login-top {
		overflow: hidden;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		color: #666;
		margin: 0 0 5px 0;
	}
</style>